{{>layout/header}}

{{>modals/deployment-modal}}

<div class="row">
    <div class="col-md-12 mb-2">

        <button type="button" class="btn btn-primary float-right" data-toggle="modal" data-target="#deploymentModal">
            New Deployment
        </button>

    </div>

    <div class="col-md-12">

        <span>{{count}} process definitions</span>

        <table class="table table-striped">
            <thead>
            <th>Process Definition Key</th>
            <th>BPMN process id</th>
            <th>Version</th>
            <th># active</th>
            <th># ended</th>
            <th>Deployment Time
                <a id="process-deployment-time" href="#" class="badge badge-secondary" data-toggle="tooltip" data-placement="top"
                   title="Sort by Deployment Time">
                    <svg class="bi" width="12" height="12" fill="white"><use xlink:href="/img/bootstrap-icons.svg#caret-up-fill"/></svg>
                </a>
            </th>
            </thead>

            {{#processes}}
            <tr>
                <td><a href="{{context-path}}views/processes/{{processDefinitionKey}}">{{processDefinitionKey}}</a></td>
                <td>{{bpmnProcessId}}</td>
                <td>{{version}}</td>
                <td>{{countRunning}}</td>
                <td>{{countEnded}}</td>
                <td>{{deploymentTime}}</td>
            </tr>
            {{/processes}}

        </table>

        {{>components/table-pagination}}

    </div>
</div>

{{>layout/footer}}

<script>
    document.addEventListener('DOMContentLoaded', function(){
        listSort('timestamp','process-deployment-time')
    }, false);
</script>